<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现货网-首页</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/layui/layui.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <script type="text/javascript" src="lib/moment.js"></script>
    <link rel="stylesheet" href="lib/common.css">
    <script type="text/javascript" src="lib/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="lib/lib.js"></script>
    <script type="text/javascript" src="lib/api.js"></script>
    <!--[if lte IE 9]>
    <script type='text/javascript' src='lib/jquery.xdomainrequest.min.js'></script>
    <![endif]-->
</head>
<body>
<style>
    html,body{
        overflow: hidden;
    }
    .mainContent{
        width: 1366px;
        margin: auto;
    }
    .btn-group button{
        margin-left: 5px!important;
    }
    .form-inline{
        text-align: center;
        margin-top: 20px;
    }
    .form-inline label{
        margin-left: 20px;
    }

    .chatBox{
        width: 100%;
        background: #1E9FFF;
    }
    .layui-laypage select{
        width: 80px;
    }

    table tbody {
        display:block;
        height: 500px;
        overflow-y:scroll;
    }


    table thead, table tbody tr {
        display:table;
        width:100%;
        table-layout:fixed;
    }
</style>
<div class="mainContent">
    <div class="row-fluid" style="padding-top: 10px;">
        <div class="span5">
            <div class="btn-group">
                <button class="btn btn-primary">首页</button>
                <button class="btn btn-primary" onclick="showMember()">会员状态</button>
                <button class="btn btn-primary" onclick="showDownload()">移动端下载</button>
                <button class="btn btn-primary">企业黑名单</button>
            </div>
        </div>
        <div class="span2">
            <span id="timeBox"></span>
        </div>
        <div class="span5">
            <div class="row-fluid">
                <div class="span3">
                    <div>我的询价次数</div>
                    <div>5</div>
                </div>
                <div class="span3">
                    <div>上传库存次数</div>
                    <div>5</div>
                </div>
                <div class="span3">
                    <div>被投诉次数</div>
                    <div>5</div>
                </div>
                <div class="span3">
                    <div>账户同时在线设备</div>
                    <div>5</div>
                </div>
            </div>
        </div>
    </div>
    <form class="form-inline">
        <label>
            品种
            <input type="text" class="input-small" placeholder="">
        </label>
        <label>
            规格
            <input type="text" class="input-small" placeholder="">
        </label>
        <label>
            材质
            <input type="text" class="input-small" placeholder="">
        </label>
        <label>
            产地
            <input type="text" class="input-small" placeholder="">
        </label>
        <label>
            公司简称
            <input type="text" class="input-small" placeholder="">
        </label>
        <button class="btn" onclick="search()">开始搜索</button>
    </form>

    <div class="row-fluid" id="mainBox">
        <div class="span2"></div>
        <div class="span7">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>品种</th>
                        <th>产地</th>
                        <th>规格</th>
                        <th>材质</th>
                        <th>库存数量</th>
                        <th>公司简称</th>
                        <th>价格</th>
                        <th>发布时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="dataContent"></tbody>
            </table>
            <div style="position: absolute;bottom: 0;">
                <div  id="pagination"></div>
            </div>
        </div>
        <div class="span3" style="height: 100%;">
            <div class="chatBox"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var laypage,
        layer,
        current=1,
        size=10

    moment.locale('zh-cn', {
        months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
        monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
        weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
        weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
        weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
        longDateFormat: {
            LT: 'HH:mm',
            LTS: 'HH:mm:ss',
            L: 'YYYY-MM-DD',
            LL: 'YYYY年MM月DD日',
            LLL: 'YYYY年MM月DD日Ah点mm分',
            LLLL: 'YYYY年MM月DD日ddddAh点mm分',
            l: 'YYYY-M-D',
            ll: 'YYYY年M月D日',
            lll: 'YYYY年M月D日 HH:mm',
            llll: 'YYYY年M月D日dddd HH:mm'
        },
        meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
        meridiemHour: function (hour, meridiem) {
            if (hour === 12) {
                hour = 0;
            }
            if (meridiem === '凌晨' || meridiem === '早上' ||
                meridiem === '上午') {
                return hour;
            } else if (meridiem === '下午' || meridiem === '晚上') {
                return hour + 12;
            } else {
                // '中午'
                return hour >= 11 ? hour : hour + 12;
            }
        },
        meridiem: function (hour, minute, isLower) {
            var hm = hour * 100 + minute;
            if (hm < 600) {
                return '凌晨';
            } else if (hm < 900) {
                return '早上';
            } else if (hm < 1130) {
                return '上午';
            } else if (hm < 1230) {
                return '中午';
            } else if (hm < 1800) {
                return '下午';
            } else {
                return '晚上';
            }
        },
        calendar: {
            sameDay: '[今天]LT',
            nextDay: '[明天]LT',
            nextWeek: '[下]ddddLT',
            lastDay: '[昨天]LT',
            lastWeek: '[上]ddddLT',
            sameElse: 'L'
        },
        dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
        ordinal: function (number, period) {
            switch (period) {
                case 'd':
                case 'D':
                case 'DDD':
                    return number + '日';
                case 'M':
                    return number + '月';
                case 'w':
                case 'W':
                    return number + '周';
                default:
                    return number;
            }
        },
        relativeTime: {
            future: '%s内',
            past: '%s前',
            s: '几秒',
            ss: '%d秒',
            m: '1分钟',
            mm: '%d分钟',
            h: '1小时',
            hh: '%d小时',
            d: '1天',
            dd: '%d天',
            M: '1个月',
            MM: '%d个月',
            y: '1年',
            yy: '%d年'
        },
        week: {
            // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
            dow: 1, // Monday is the first day of the week.
            doy: 4  // The week that contains Jan 4th is the first week of the year.
        }
    })

    function resize(){
        var h = $(window).height()
        $(".chatBox").height(h-110)
    }

    function timeFormat(){
        $("#timeBox").text(moment().format('YYYY年M月D日 aHH:mm'))
    }

    function showDownload(){
        layer.open({
            type: 2,
            title: '移动端下载',
            area: ['400px', '600px'],
            content: 'mobile.html'
        })
    }

    function showMember(){
        layer.open({
            type: 2,
            title: '会员状态',
            area: ['400px', '600px'],
            content: 'member.html'
        })
    }

    function showLogin(){
        layer.open({
            type: 2,
            title: '登录',
            area: ['500px', '300px'],
            content: 'login.html'
        })
    }

    function stockList(){
        var post = {
            current: current,
            size: size
        }
        api.stockList(post,function (res){
            if(res.code==200){
                var records = res.data.records
                var html = ""
                for(var i=0;i<records.length;i++){
                    var temp = '<tr>'
                    temp+='<td>'+records[i].varieties+'</td>'
                    temp+='<td>'+records[i].place+'</td>'
                    temp+='<td>'+records[i].spec+'</td>'
                    temp+='<td>'+records[i].textureMaterial+'</td>'
                    temp+='<td>'+records[i].quantity+'</td>'
                    if(records[i].company=='*****'){
                        temp+='<td>'+records[i].company+'</td>'
                    } else {
                        temp+='<td><a href="#" onclick="showCompany('+records[i].id+')">'+records[i].company+'</a></td>'
                    }
                    temp+='<td>'+records[i].floorPrice+'</td>'
                    temp+='<td>'+records[i].createTime+'</td>'
                    temp+='<td><a href="#" onclick="showComplaint('+records[i].id+')">投诉</a></td>'
                    temp += '</tr>'
                    html+=temp
                }
                $("#dataContent").html(html)

                laypage.render({
                    elem: 'pagination',
                    count: res.data.total,
                    limit: size,
                    curr: current,
                    layout: [ 'prev', 'page', 'limit', 'next'],
                    jump: function(obj,first){
                        console.log(obj)
                        size = obj.limit
                        if(!first){
                            current = obj.curr
                            stockList()
                        }
                    }
                })
            }
        })
    }

    function showCompany(id){
        layer.open({
            type: 2,
            title: '公司简介',
            area: ['760px', '600px'],
            content: 'company.html?id='+id
        })
    }

    function showComplaint(id){
        layer.open({
            type: 2,
            title: '投诉',
            area: ['760px', '600px'],
            content: 'complaint.html?id='+id
        })
        // if(Cookie.get('Authorization')){
        //     layer.open({
        //         type: 2,
        //         title: '投诉',
        //         area: ['760px', '600px'],
        //         content: 'complaint.html?id='+id
        //     })
        // } else {
        //     showLogin()
        // }
    }

    function search(){
        alert(555)
    }

    $(document).on('keydown', function(ev){
        if(ev.keyCode==27){
            layer.closeAll()
        }
    })

    window.onresize = function (){
        resize()
    }

    window.onload = function (){
        resize()
        timeFormat()
        setInterval(function (){
            timeFormat()
        },1000)

        layui.use(['laypage', 'layer'], function(){
            laypage = layui.laypage
            layer = layui.layer
            stockList()
        })
    }
</script>
</body>
</html>
